<script setup lang="ts">
//接收父组件传来的item
import {useRouter} from "vue-router";

const props = defineProps({
    appointmentInfo: {
        type: [Object, String]
    }
})

let baseUrl = 'http://192.168.5.120:8090'


// 跳转传参
const detail = useRouter()

function appointmentDetail(item) {
    detail.push({
        path: '/yuyuexiangqing',
        query: {id: item.id}
    })
    // console.log(item)
}

</script>

<template>
    <div @click="appointmentDetail(props.appointmentInfo)">
        <div class="phone">
            <div class="phoneone">
                <div class="Consultation">
                    <van-icon name="smile-comment-o" style="font-size: 20px"/>
                    <span>{{ props.appointmentInfo.mode }}</span>
                </div>
                <div class="Status" style="background-color: #e8d3ff;color: #7246c5"
                     v-if="props.appointmentInfo.status==0">
                    待开始
                </div>
                <div class="Status" style="background-color: #58e043;color: #ffffff"
                     v-if="props.appointmentInfo.status==4">
                    进行中
                </div>
                <div class="Status" style="background-color: #077ac0;color: #ffffff"
                     v-if="props.appointmentInfo.status==2">
                    已结束
                </div>
                <div class="Status" style="background-color: #eca400;color: #ffffff"
                     v-if="props.appointmentInfo.status==3">
                    已取消
                </div>
            </div>
            <div class="time">
                <div class="Start">
                    <div class="Month">
                        {{
                        props.appointmentInfo.psyScheduling.date.slice(5, 7)
                        }}月{{ props.appointmentInfo.psyScheduling.date.slice(8) }}日
                    </div>
                    <div class="Hour">
                        {{ props.appointmentInfo.psyScheduling.startTime }}
                    </div>
                    <div class="tim">
                        开始时间
                    </div>
                </div>
                <div class="Process">
                    <div class="timet">
                        {{ props.appointmentInfo.duration }}分钟
                    </div>
                </div>
                <div class="Start">
                    <div class="Month">
                        {{
                        props.appointmentInfo.psyScheduling.date.slice(5, 7)
                        }}月{{ props.appointmentInfo.psyScheduling.date.slice(8) }}日
                    </div>
                    <div class="Hour">
                        {{ props.appointmentInfo.psyScheduling.endTime }}
                    </div>
                    <div class="tim">
                        结束时间
                    </div>
                </div>
            </div>
            <div class="there">
                <div class="picter">
                    <img :src="baseUrl+props.appointmentInfo.psyTeacher.avatar" alt="" id="woes">
                </div>
                <div class="information">
                    <div class="top">
                        <span>{{ props.appointmentInfo.psyTeacher.name }}</span>
                        <div class="one"></div>
                        <div class="zix">
                            {{ props.appointmentInfo.psyTeacher.count }}人咨询过
                        </div>
                    </div>
                    <div class="button">
                        {{ props.appointmentInfo.psyTeacher.profession }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.phone {
  width: 95%;
  height: 180px;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;

  .phoneone {
    display: flex;
    justify-content: space-between;

    .Consultation {
      span {
        font-size: 13px;
        margin-left: 10px;
      }
    }

    .Status {
      width: 70px;
      height: 20px;
      text-align: center;
      border-radius: 10px 0 0 10px;
      font-size: 13px;
    }

  }

  .time {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .Start {
      width: 20%;

      .Month {
          //width: 40%;
        font-size: 14px;
      }

      .Hour {
        font-size: 20px;
      }

      .tim {
        font-size: 12px;
        color: gray;
      }
    }

    .Process {
      border-bottom: 2px solid gray;
      width: 40%;
      height: 33px;

      .timet {
        width: 60px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        text-align: center;
        margin: 22px auto;
        font-size: 12px;
        background-color: #F2F3F4;
      }
    }
  }

  .there {
    width: 96%;
    margin-top: 10px;
    border-top: 1px solid #F2F3F4;
    padding: 10px;
    display: flex;

    .picter {
      width: 11%;
      height: 40px;
      border-radius: 6px;

      #woes {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }

    .information {
      margin-left: 5px;
      width: 88%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        width: 70%;
        display: flex;
        justify-content: space-between;

        span {
          font-size: 14px;
        }

        .one {
          height: 15px;
          border-left: 1px solid gray;
        }

        .zix {
          color: #c0bdbd;
          font-size: 14px;
        }
      }

      .button {
        font-size: 12px;
        color: #c0bdbd;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>